<template>
  <el-dialog title="管理术语" :visible.sync="dialogVisible" :before-close="handleClose" fullscreen>
    <div class="wrapper">
      <div>
        <div class="row">
          <div class="cell">中文</div>
          <div class="cell">英文</div>
          <div class="cell">中文释义</div>
          <div class="cell">英文释义</div>
          <div class="cell">来源</div>
          <div class="cell">注</div>
          <div class="cell">操作</div>
        </div>
        <el-form :model="ruleForm" class="rows" @submit.native.prevent>
          <div class="row item" v-for="(item, index) of list" :key="item.blockId + '_' + index">
            <el-form-item><el-input size="mini" v-model="item.termData.nameZh" /></el-form-item>
            <el-form-item><el-input size="mini" v-model="item.termData.nameEn" /></el-form-item>
            <el-form-item
              ><el-input type="textarea" size="mini" v-model="item.termData.description" :rows="1"
            /></el-form-item>
            <el-form-item
              ><el-input type="textarea" size="mini" v-model="item.termData.descriptionEn" :rows="1"
            /></el-form-item>
            <el-form-item><el-input size="mini" v-model="item.termData.source" /></el-form-item>
            <el-form-item>
              <el-popover
                trigger="click"
                placement="top"
                v-for="(note, idx) in item.termData.noteList"
                :key="note.dataId"
                popper-class="popover-wrapper"
              >
                <el-input size="mini" v-model="note.textData.contentList[1].content"></el-input>
                <el-tag
                  @close="removeNote(item.termData.noteList, idx)"
                  :title="note.textData.contentList[1].content"
                  closable
                  size="mini"
                  slot="reference"
                  >注{{ idx + 1 }}</el-tag
                >
              </el-popover>
              <el-button size="mini" @click="addNote(item.termData.noteList)">+ 注</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="text" :disabled="index === 0" @click="moveup(list, index)">上移</el-button>
              <el-button size="mini" type="text" :disabled="index === list.length - 1" @click="movedown(list, index)"
                >下移</el-button
              >
              <el-button size="mini" type="text" @click="add(index)">新增</el-button>
              <el-button size="mini" type="text" @click="remove(list, index)">删除</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div class="btn-row" v-if="list.length === 0">
          <el-button icon="el-icon-plus" size="mini" @click="add"></el-button>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { MessageBox } from 'element-ui'
import { v4 as uuid } from 'uuid'
import { moveup, movedown, remove } from '@/utils/helpers'
import { cloneDeep } from 'lodash'

export default {
  name: 'ManageTermsDialog',
  data() {
    return {
      list: [],
      ruleForm: {},
      dialogVisible: false
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.list = cloneDeep(this.$store.state.xmleditor.termBlockList)
    },
    async handleConfirm() {
      let list = cloneDeep(this.list)
      list = list.map((item) => {
        // 如果注有多个，需要加上注编号和补充fullContent
        const noteList = item.termData.noteList
        let cloneItem = cloneDeep(item)
        if (noteList.length > 1) {
          const cloneList = noteList.map((i, idx) => {
            let note = cloneDeep(i)
            note.textData.contentList[0] = {
              contentNumber: idx + 1,
              fullContent: `注${idx + 1}：`
            }
            const _content = note.textData.contentList[1]
            note.textData.contentList[1] = {
              ..._content,
              fullContent: _content.content
            }
            return note
          })
          cloneItem.termData.noteList = cloneList
          return cloneItem
        }
        return item
      })
      this.$store.commit('xmleditor/SET_TERM_BLOCK_LIST', list)
      this.$store.commit('xmleditor/UPDATE_TERMS')
      this.handleClose()
    },
    add(index) {
      const newTerm = {
        blockId: uuid(),
        dataType: 'terms',
        termData: {
          dataId: uuid(),
          nameZh: '',
          nameEn: '',
          description: '',
          descriptionEn: '',
          source: '',
          noteList: []
        }
      }
      if (index !== undefined) {
        this.list.splice(index + 1, 0, newTerm)
      } else {
        this.list.push(newTerm)
      }
    },
    addNote(list) {
      list.push({
        dataId: uuid(),
        dataType: 'item_note',
        textData: { dataId: uuid(), contentList: [{ fullContent: '注：' }, { content: '' }] }
      })
    },
    moveup,
    movedown,
    remove,
    async removeNote(list, idx) {
      try {
        await MessageBox.confirm(`是否删除注${idx + 1}?`, '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          distinguishCancelAndClose: true,
          type: 'warning'
        })
        list.splice(idx, 1)
      } catch (error) {
        console.log(error)
      }
    },

    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
::v-deep .el-form-item__content {
  line-height: 30px;
}
::v-deep .el-textarea__inner {
  min-height: 28px;
  height: 28px;
  padding: 4px 15px;
}
::v-deep .el-tag {
  margin: 0 2px;
}
.row {
  display: flex;
}
.row > div {
  padding: 0 1px;
  margin-bottom: 0;
}
.row > div:nth-child(3),
.row > div:nth-child(4) {
  flex-grow: 1;
}
.row > div:nth-child(1),
.row > div:nth-child(2),
.row > div:nth-child(5),
.row > div:nth-child(6),
.row > div:last-child {
  width: 200px;
}
.btn-row {
  text-align: center;
  margin-top: 15px;
}
.btn-row .el-button--mini {
  padding: 7px 50px;
}
</style>
